<template>
  <div class="monitor">
    <div class="title">
      <p class="tip">问题单</p>
      <div class="Button_Summary">
        <button class="goBack exceptions" @click="SummaryExport">导出各处理汇总表</button>
        <button class="goBack exceptions" @click="BySysSummaryExport">导出各类所属系统汇总表</button>
        <button @click="back" class="goBack">返回</button>
      </div>
    </div>
    <div class="contain">
      <el-container>
        <el-header>
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">超时未分发</el-menu-item>
            <el-menu-item index="2">超时未受理</el-menu-item>
            <el-menu-item index="3">超时无解决计划</el-menu-item>
            <el-menu-item index="4">超时未解决</el-menu-item>
            <el-menu-item index="5">超时未补全</el-menu-item>
            <el-menu-item index="6">超时未关闭</el-menu-item>
            <el-menu-item index="7">超时未复核</el-menu-item>
            <el-menu-item index="8">超时未受理（业务）</el-menu-item>
          </el-menu>
        </el-header>
        <el-main>
          <div class="main">
            <el-form :inline="true" class="demo-form-inline first">
              <el-form-item label="问题单号" prop="changeCode">
                <el-input
                  clearable
                  v-model="changeCode"
                  class="inline-input"
                  placeholder="请输入问题单号"
                />
              </el-form-item>
              <el-form-item label="问题标题" prop="changeTitle">
                <el-input
                  clearable
                  v-model="changeTitle"
                  class="inline-input"
                  placeholder="请输入问题标题"
                />
              </el-form-item>
              <el-form-item label="涉及系统" prop="sysName">
                <el-input
                  clearable
                  v-model="sysName"
                  class="inline-input"
                  placeholder="请输入系统名称"
                />
              </el-form-item>
              <el-form-item label="所属机构" prop="OrgName">
                <!-- <el-input
                  clearable
                  v-model="OrgName"
                  class="inline-input"
                  placeholder="请输入机构名称"
                /> -->
                <!-- @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'WT_TYPE')" -->
                <el-select
                  ref="TypeSelect"
                  v-model="OrgName"
                  placeholder="请选择所属机构"
                  style="width: 240px"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="item in orgList"
                    :key="item.orgId"
                    :label="item.orgName"
                    :value="item.orgId"
                  />
                </el-select>
              </el-form-item>
            </el-form>
            <el-form :inline="true" class="demo-form-inline" @submit.prevent>
              <!-- <el-form-item label="问题分类">
                <el-select
                  ref="ClassSelect"
                  v-model="questionClass"
                  placeholder="请选择问题分类"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'WT_FENLEI')"
                >
                  <el-option
                    v-for="(item, index) in restaurants"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionClass"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, restaurants);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题分类"
                  @select="handleSelectPara($event, 'WT_FENLEI')"
                />
              </el-form-item> -->
              <!-- <el-form-item label="问题类型">
                <el-select
                  ref="TypeSelect"
                  v-model="questionType"
                  placeholder="请选择问题类型"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'WT_TYPE')"
                >
                  <el-option
                    v-for="(item, index) in TypeList"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionType"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, TypeList);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题类型"
                  @select="handleSelectPara($event, 'WT_TYPE')"
                />
              </el-form-item>
              <el-form-item label="问题状态">
                <el-select
                  ref="StatusSelect"
                  v-model="questionStatus"
                  placeholder="请选择问题状态"
                  style="width: 240px"
                  filterable
                  clearable
                  @visible-change="isShowSelectOptions"
                  @change="handleSelectPara($event, 'issue_status')"
                >
                  <el-option
                    v-for="(item, index) in statusList"
                    :key="index + 1"
                    :label="item.value"
                    :value="item.valueDetail"
                  />
                </el-select>
                <el-autocomplete
                  v-if="false"
                  v-model="questionStatus"
                  :fetch-suggestions="
                    (queryString, cb) => {
                      querySearch(queryString, cb, statusList);
                    }
                  "
                  clearable
                  class="inline-input w-50"
                  placeholder="请选择问题状态"
                  @select="handleSelectPara($event, 'issue_status')"
                />
              </el-form-item> -->
              <template v-if="activeIndex=='7' || activeIndex=='8'">
                <el-form-item label="业务部门">
                  <!-- <el-input
                    clearable
                    v-model.trim="businessOrg"
                    class="inline-input"
                    placeholder="请输入业务部门"
                  /> -->
                  <el-select
                    ref="TypeSelect"
                    v-model="businessOrg"
                    placeholder="请选择业务部门"
                    style="width: 290px"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in orgList2"
                      :key="item.value"
                      :label="item.valueDetail"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="业务处室">
                  <!-- <el-input
                    clearable
                    v-model.trim="bsDeptName"
                    class="inline-input"
                    placeholder="请输入业务处室"
                  /> -->
                  <el-select
                    ref="TypeSelect"
                    v-model="bsDeptName"
                    placeholder="请选择业务处室"
                    style="width: 290px"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in paraTbDeptList"
                      :key="item.id"
                      :label="item.deptName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
              <template v-else>
                <el-form-item label="建设部门">
                  <!-- <el-input
                    clearable
                    v-model="buildDept"
                    class="inline-input"
                    placeholder="请输入建设部门"
                  /> -->
                  <el-select
                    ref="TypeSelect"
                    v-model="buildDept"
                    placeholder="请选择建设部门"
                    style="width: 240px"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in orgList"
                      :key="item.orgId"
                      :label="item.orgName"
                      :value="item.orgId"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="建设处室">
                  <!-- <el-input
                    clearable
                    v-model="deptName"
                    class="inline-input"
                    placeholder="请输入建设处室"
                  /> -->
                  <el-select
                    ref="TypeSelect"
                    v-model="deptName"
                    placeholder="请选择建设处室"
                    style="width: 240px"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="item in paraTbDeptList"
                      :key="item.id"
                      :label="item.deptName"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </template>
              <el-form-item class="button">
                <el-button @click="detail" class="btn deatil">查看详情</el-button>
                <el-button @click="search" @keyup.enter="monitor()" class="btn reset">
                  搜索
                </el-button>
                <el-button @click="resetForm" class="btn">重置</el-button>
                <el-button @click="downloadExcel('')" class="btn">导出</el-button>
                <el-dropdown trigger="click" v-if="false">
                  <span class="el-dropdown-link">
                    导出<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item icon="el-icon-plus" @click="downloadExcel('currentPage')">
                        导出当前页</el-dropdown-item
                      >
                      <el-dropdown-item icon="el-icon-circle-plus" @click="downloadExcel('')">
                        导出所有页</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </el-form-item>
            </el-form>
          </div>
          <div class="tableBox">
            <div class="desc">
              <img src="../../assets/images/bbsm.png" alt="" />
              {{ desc }}
            </div>
            <div class="table" ref="container">
              <el-table
                :height="tableHeight"
                ref="multipleTableRef"
                :data="changeList"
                tooltip-effect="dark"
                row-key="getRowKey"
                v-loading="loading"
                element-loading-text="加载中"
                @row-click="handleRowClick"
                @select="selectChange"
                @selection-change="handleSelectionChange"
              >
                <el-table-column
                  align="center"
                  :reserve-selection="false"
                  type="selection"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  align="center"
                  prop="questionNo"
                  label="问题单号"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionTitle"
                  label="问题标题"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="sysName"
                  label="涉及系统"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionOrgName"
                  label="所属机构"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionClass"
                  label="问题分类"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionType"
                  label="问题类型"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="questionStatus"
                  label="问题状态"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="businessOrg"
                  label="业务部门"
                  v-if="activeIndex=='7' ||activeIndex=='8'"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  v-else
                  align="center"
                  prop="buildDept"
                  label="建设单位"
                  show-overflow-tooltip
                ></el-table-column>
                <!-- 以下为新增字段 -->
                <el-table-column
                  v-if="activeIndex=='7' || activeIndex=='8'"
                  align="center"
                  prop="bsDeptName"
                  label="业务处室"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  v-else
                  align="center"
                  prop="deptName"
                  label="建设处室"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="reportname"
                  label="问题发现人"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="seriousLev"
                  label="问题等级"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  v-if="activeIndex=='7' || activeIndex=='8'"
                  align="center"
                  prop="businessId"
                  label="业务经理"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  v-else
                  align="center"
                  prop="auditName"
                  label="技术经理"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="auditTimes"
                  label="审核时间"
                  v-if="activeIndex == '1'"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="distributeTime"
                  label="分发时间"
                  width="160px"
                  v-if="activeIndex == '2' || activeIndex == '3' || activeIndex == '4' || activeIndex == '7' || activeIndex == '8'"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="sendTimes"
                  width="160px"
                  label="退回时间"
                  v-if="activeIndex == '5'"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="solutionTime"
                  width="160px"
                  label="解决时间"
                  v-if="activeIndex == '6'"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="overDays"
                  label="超时天数"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
            </div>
            <!-- 分页 -->
            <el-pagination
              ref="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  // import { changeOrganization } from '@/http/api';
  // import { eventListExport, download } from '@/http/api/monitor';
  import { paraType,paraTbDeptApi,paraDeptApi } from '@/http/api1';
  import { questionStatusList, exportType, download,fmBizSummaryExport,fmBizBySysSummaryExport,imbizSkipDetailApi} from '@/http/api/problem';
  import { ref, onMounted, onBeforeUnmount, reactive, watch, nextTick } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  //   import { useStore } from 'vuex';
  //   const store = useStore();
  const router = useRouter();
  const route = useRoute();
  const changeList = reactive([]);
  const pageNum = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const changeTitle = ref(''); // 标题
  const changeCode = ref(''); // 单号
  const sysName = ref(''); // 系统名称
  const OrgName = ref(''); // 机构名称
  const questionClass = ref(''); // 问题分类
  const questionType = ref(''); // 问题类型
  const questionStatus = ref(''); // 问题状态
  const questionClassNum = ref(''); // 问题分类
  const questionTypeNum = ref(''); // 问题类型
  const questionStatusNum = ref(''); // 问题状态
  const buildDept = ref(''); // 建设部门
  const deptName = ref(''); //业务处室
  const businessOrg = ref(''); // 业务部门
  const bsDeptName = ref(''); //业务处室

  const container = ref(null);
  const tableHeight = ref(0);
  const desc = ref('');
  const multipleTableRef = ref<InstanceType<typeof ElTable>>();
  const ClassSelect = ref();
  const TypeSelect = ref();
  const StatusSelect = ref();
  const multipleTable = ref<User[]>([]);
  // const eventId = ref(''); // 告警ID
  // console.log(route.params,'route.params-route.params')
  const activeIndex = ref(route.params.type ? route.params.type : '1');
  const statusList = reactive([]); // 问题状态列表
  const restaurants = reactive([]); // 问题分类列表
  const TypeList = reactive([]); // 问题类型列表
  const orgList=ref([])
  const orgList2=ref([])//业务部门
  const paraTbDeptList=ref([])

  //
  const loading = ref(false);
  onMounted(() => {
    console.log("--------------------")
    getPage();
    getBookFn();
    Event_status('WT_FENLEI', restaurants);
    Event_status('WT_TYPE', TypeList);
    Event_status('issue_status', statusList);
    enterKeyup();
    calHeight();
    loading.value = true;
    StatusList();
    switch (activeIndex.value) {
      case '1':
        desc.value = '超时未分发：“待分发”状态超过5天的问题单';
        break;
      case '2':
        desc.value = '超时未受理：“待技术受理”状态超过5天的问题单';
        break;
      case '3':
        desc.value =
          '超时无解决计划：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超15天、问题等级为“中”距“问题分发”任务完成超25天、问题等级为“低”且距“问题分发”任务完成超35天的问题单';
        break;
      case '4':
        desc.value =
          '超时未解决：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        break;
      case '5':
        desc.value = '超时未补全：“退回待修改”状态超过7天的问题单';
        break;
      case '6':
        desc.value = '超时未关闭：“待关闭”状态超过14天的问题单';
        break;
       case '7':
        desc.value = '“待业务复核”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        break;
      case '8':
        desc.value = '待业务受理”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        break;

      default:
        break;
    }
  });

  // 系统名过滤
  const querySearch = (queryString: string, cb: any, obj: any) => {
    const results = queryString ? obj.filter(createFilter(queryString)) : obj;
    // 调用 callback 返回建议列表的数据

    cb(results);
  };
  const createFilter = (queryString: striing) => {
    return (restaurant) => {
      if (restaurant) {
        return restaurant.value.includes(queryString);
        // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
      }
    };
  };
  const getPage = () => {
    const localPage = localStorage.getItem('monitorListPage');
    if (localPage != null) {
      pageNum.value = Number(localPage);
    } else {
      pageNum.value = 1;
    }
  };
  const handleSelect = (key: any) => {
    activeIndex.value = key;
    loading.value = true;
    console.log(activeIndex.value);
    //route.params.type=activeIndex.value
     router.replace({
      name: 'Issues',
      params: {
        type: activeIndex.value
      }
    });
    getBookFn()
    switch (activeIndex.value) {
      case '1':
        desc.value = '超时未分发：“待分发”状态超过5天的问题单';
        break;
      case '2':
        desc.value = '超时未受理：“待技术受理”状态超过5天的问题单';
        break;
      case '3':
        desc.value =
          '超时无解决计划：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超15天、问题等级为“中”距“问题分发”任务完成超25天、问题等级为“低”且距“问题分发”任务完成超35天的问题单';
        break;
      case '4':
        desc.value =
          '“预解决（待解决）”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        // "超时未解决：“技术受理中”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单";
        break;
      case '5':
        desc.value = '超时未补全：“退回待修改”状态超过7天的问题单';
        break;
      case '6':
        desc.value = '超时未关闭：“待关闭”状态超过14天的问题单';
        break;
      case '7':
        desc.value = '“待业务复核”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        break;
      case '8':
        desc.value = '待业务受理”状态下，问题等级为“高”且距“问题分发”任务完成超30天、问题等级为“中”距“问题分发”任务完成超90天、问题等级为“低”且距“问题分发”任务完成超180天的问题单';
        break;

      default:
        break;
    }
    StatusList();
  };
  const isShowSelectOptions = (isShowSelectOptions: any) => {
    if (!isShowSelectOptions) {
      console.log('隐藏');
      // ClassSelect.value.blur();
      nextTick(() => {
        ClassSelect.value.blur();
        TypeSelect.value.blur();
        StatusSelect.value.blur();
      });
    }
  };
  const monitor = () => {
    document.onkeydown = (e) => {
      if (e.keyCode == 13) {
        search();
      }
    };
  };
  const enterKeyupDestroyed = () => {
    document.removeEventListener('keyup', monitor());
  };
  const enterKeyup = () => {
    document.addEventListener('keyup', monitor());
  };
  const calHeight = () => {
    const rect = container.value.getBoundingClientRect();
    tableHeight.value = rect.height;
  };
 
  const getBookFn=()=>{
      paraDeptApi({
        pageNum: 1,
        pageSize: 9999}).then(res=>{
      if ((res as any).data.code !== 0) {
          ElMessage({
            message: (res as any).data.msg,
            type: 'error'
          });
          return;
        }
        orgList.value=res.data.data.rows;
        console.log(res)
      })
    //paraTbDeptList
      paraTbDeptApi({
        pageNum: 1,
        pageSize: 9999,
        type:activeIndex.value
        }).then(res=>{
      if ((res as any).data.code !== 0) {
          ElMessage({
            message: (res as any).data.msg,
            type: 'error'
          });
          return;
        }
        paraTbDeptList.value=res.data.data.rows;
        console.log(res)
      })
      paraType({
        type: 'vm_dept',
        pageNum: 1,
        pageSize: 9999
      }).then((res) => {
        if ((res as any).data.code !== 0) {
          ElMessage({
            message: (res as any).data.msg,
            type: 'error'
          });
          return;
        }
       orgList2.value=res.data.data.rows;
      });
  }
  const Event_status = (type: string, arr: Array) => {
    paraType({
      type: type,
      pageNum: 1,
      pageSize: 100
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      arr.length = 0;
      res.data.data.rows.forEach((item) => {
        (arr as any).push({
          value: item.valueDetail,
          valueDetail: item.value
        });
      });
    });
  };
  const StatusList = () => {
    // loading.value = false;
    // changeList.length = 0;
    // (changeList as any).push(...[{ aa: 1 }, { bb: 1 }]);
    // total.value = 100;
    // return;
    let subData={ 
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value),
      type: activeIndex.value,
      questionNo: changeCode.value,
      questionTitle: changeTitle.value,
      sysName: sysName.value,
      questionOrgName: OrgName.value,
      questionClass: questionClassNum.value, // 问题分类
      questionType: questionTypeNum.value, // 问题类型
      questionStatus: questionStatusNum.value, // 问题状态
      buildDept:'',
      deptName:'',
      businessOrg:'',
      bsDeptName:'',
      // busDeptList:'',//7或者8 业务处室
      // buildDeptList:''// 建设部门
    }
    if(activeIndex.value =='7' || activeIndex.value=='8'){
      subData={...subData,
      businessOrg: businessOrg.value, // 业务部门
      bsDeptName: bsDeptName.value//业务处室
      }
    }else{
      subData={...subData,
      buildDept: buildDept.value, // 建设部门
      deptName: deptName.value
      }
      // subData.buildDept=buildDept.value
    }
    questionStatusList(subData).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      loading.value = false;
      changeList.length = 0;
      (changeList as any).push(...res.data.data.rows);
      total.value = res.data.data.total;
    });
  };
  // 导出当前页
  const downloadExcel = (currentPage: any) => {
    exportType({
      currentPage: currentPage,
      type: activeIndex.value,
      questionNo: changeCode.value,
      questionTitle: changeTitle.value,
      sysName: sysName.value,
      questionOrgName: OrgName.value,
      questionClass: questionClassNum.value, // 问题分类
      questionType: questionTypeNum.value, // 问题类型
      questionStatus: questionStatusNum.value, // 问题状态
      buildDept: buildDept.value, // 建设部门
      deptName: deptName.value,
      pageNum: JSON.stringify(pageNum.value),
      pageSize: JSON.stringify(pageSize.value)
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      download_list(res.data.msg);
    });
  };
  const download_list = (type) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  // const clearperson = () => {
  //   handlePersonId.value = '';
  // };
  // const person_modify = () => {
  //   handlePersonId.value = '';
  // };

  // 重置
  const resetForm = () => {
    changeCode.value = ''; // 单号
    changeTitle.value = ''; // 标题
    sysName.value = '';
    OrgName.value = '';
    questionClass.value = ''; // 问题分类
    questionType.value = ''; // 问题类型
    questionStatus.value = ''; // 问题状态
    questionClassNum.value = ''; // 问题分类
    questionTypeNum.value = ''; // 问题类型
    questionStatusNum.value = ''; // 问题状态
    buildDept.value = '';
    deptName.value = '';
    businessOrg.value='';
    bsDeptName.value='';
  };
  const search = () => {
    pageNum.value = 1;
    if (!questionClass.value) {
      questionClassNum.value = '';
    } else {
      questionClass.value = questionClass.value.replace(/(^\s*)|(\s*$)/g, '');
      if (!questionClassNum.value) {
        questionClassNum.value = questionClass.value;
      }
    }
   
    changeTitle.value = changeTitle.value.replace(/(^\s*)|(\s*$)/g, '');
    changeCode.value = changeCode.value.replace(/(^\s*)|(\s*$)/g, '');
    sysName.value = sysName.value.replace(/(^\s*)|(\s*$)/g, '');
    OrgName.value = OrgName.value?OrgName.value.replace(/(^\s*)|(\s*$)/g, ''):'';
    buildDept.value = buildDept.value?buildDept.value.replace(/(^\s*)|(\s*$)/g, ''):'';
    deptName.value = deptName.value?deptName.value.replace(/(^\s*)|(\s*$)/g, ''):'';
    loading.value = true;
    StatusList();
  };
  // 分页
  const handleSizeChange = (size) => {
    pageSize.value = size;
    loading.value = true;
    StatusList();
  };

  //下载
  const downloadlist = (type: string) => {
    download({
      fileName: type,
      delete: true
    }).then((res) => {
      const link = document.createElement('a');
      let blob = new Blob([res.data], {
        type: 'application/vnd.ms-excel'
      });
      link.style.display = 'none';
      link.href = URL.createObjectURL(blob);
      link.download = type; //下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  };
  const SummaryExport = () => {
    //  flag: '2'
    fmBizSummaryExport({}).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };
  const BySysSummaryExport = () => {
    // { flag: '2' }
    fmBizBySysSummaryExport({}).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      downloadlist(res.data.msg);
    });
  };


  const handleCurrentChange = (num) => {
    pageNum.value = num;
    loading.value = true;
    localStorage.setItem('monitorListPage', num);
    StatusList();
  };

  const back = () => {
    // this.$router.go(-1);
    router.push({
      name: 'restructure'
    });
    localStorage.removeItem('List_configuration');
  };

  // 点击行触发，选中或不选中复选框
  const handleRowClick = (row) => {
    multipleTable.value = row;
    console.log(multipleTable.value);
    multipleTableRef.value.toggleRowSelection(row);
    selectChange(multipleTable.value);
  };
  const selectChange = (selection: string) => {
    if (selection.length > 1) {
      const del_row = selection.shift();
      multipleTableRef.value!.toggleRowSelection(del_row);
    }
  };
  const handleSelectionChange = (val: string) => {
    multipleTable.value = val;
  };

  const detail = () => {
    if (!multipleTable.value.length) {
      ElMessage({
        message: '请先勾选查看的数据',
        type: 'warning'
      });
    } else {
        imbizSkipDetailApi({
            questionId: multipleTable.value[0].questionId
          }).then((res:any) => {
            if ((res as any).data.code !== 0) {
              ElMessage({
                message: (res as any).data.msg,
                type: 'error'
              });
              return;
            }
            console.log(res)
            let url=res.data.data.wtUrl
            window.open(url)
          });
      // router.push({
      //   name: "lssues_detail",
      //   params: {
      //     type: activeIndex.value,
      //     value: multipleTable.value[0].questionId,
      //   },
      // });
      //https://20.200.163.145:9996/itsm/monitor/questionCount/imbizSkipDetail
     
    }
  };

  const handleSelectPara = (item, type) => {
    switch (type) {
      case 'WT_FENLEI':
        questionClassNum.value = item;
        break;
      case 'WT_TYPE':
        questionTypeNum.value = item;
        break;
      case 'issue_status':
        questionStatusNum.value = item;
        break;
      default:
        break;
    }
  };
  onBeforeUnmount(() => {
    enterKeyupDestroyed();
  });
  watch(
    () => router.options.history.state.back,
    (newVal) => {
      if (newVal == '/restructure') {
        localStorage.removeItem('monitorListPage');
      } else if (newVal == '/monitor_detail') {
        const localPage = JSON.parse(localStorage.getItem('List_configuration'));
        // JSON.stringify
        (orgId.value = localPage.orgId), // 系统ID
          (state.value = localPage.state), // 系统名称
          (changeCode.value = localPage.changeCode), // 单号
          (changeTitle.value = localPage.changeTitle), // 标题
          (affiliatedCenter.value = localPage.affiliatedCenter), // 所属中心
          (eventLevel.value = localPage.eventLevel), //事件等级
          (responsibilityDept.value = localPage.responsibilityDept), // 当前责任处室
          (handlePerson.value = localPage.handlePerson), // 处理人
          (status.value = localPage.status), // 事件状态
          (statusCode.value = localPage.statusCode), // 事件状态参数码
          (overTime.value = localPage.overTime), // 超时事件
          (handlePersonId.value = localPage.handlePersonId);
      }
    },
    { immediate: true }
  );
</script>
<style lang="less" scoped>
  .monitor {
    width: 100%;
    height: 100vh;
    background: #eaeef4;
    padding: 20px;
    box-sizing: border-box;
    //background-image: url("../../assets/images/background-image.jpg");

    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      .tip {
        height: 34px;
        line-height: 34px;
        font-size: 18px;
        font-weight: 400;
        color: #46545d;
        margin: 0;
        padding: 0;
      }
      .goBack {
        background: #007af5;
       min-width: 80px;
        white-space: nowrap;
        height: 34px;
        border: none;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        cursor: pointer;
        margin-left: 5px;
        padding: 0 8px;
      }
    }
    .tabs_item {
      height: calc(100% - 50px);
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      :deep(.el-tabs) {
        height: 100%;
        .el-tabs__header {
          .el-tabs__nav-wrap::after {
            width: 0;
          }
          .el-tabs__nav-wrap {
            .el-tabs__nav-scroll {
              .el-tabs__nav {
                .el-tabs__active-bar {
                  height: 2px;
                }
                .el-tabs__item {
                  font-size: 16px;
                  font-weight: 400;
                  color: #46545d;
                  &.is-active {
                    font-weight: bold;
                    color: #007af5;
                  }
                }
              }
            }
          }
        }
        .el-tabs__content {
          height: calc(100% - 40px);
          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
    .contain {
      background: #fff;
      height: calc(100% - 50px);
      .el-container {
        height: 100%;
        .el-header {
          .el-menu--horizontal {
            border-bottom: none;
            .el-menu-item {
              font-size: 16px;
              font-weight: 400;
              color: #46545d;
              &.is-active {
                font-size: 16px;
                font-weight: bold;
                color: #007af5;
                border-bottom: 2px solid #007af5;
              }
            }
          }
        }
        .el-main {
          .main {
            // display: flex;
            // justify-content: space-between;
            margin-bottom: 15px;
            .demo-form-inline {
              display: flex;
              height: 34px;
              // max-width: 70%;
              // width: 70%;
              //align-items: center;
              :deep(input::placeholder) {
                font-size: 14px;
                font-weight: 400;
                color: #bbbbbb;
              }
              :deep(.el-form-item) {
                margin-bottom: 0;
                line-height: 34px;
                height: 34px;
                width: 40%;
              }
              :deep(.el-form-item__content) {
                line-height: 34px;
                flex-wrap: nowrap;
                //height: 43px;
                // width: 80%;
                :deep(.inline-input) {
                  // width: 230px;
                  // height: 34px;
                  .el-input__wrapper {
                    :deep(.el-input__inner) {
                      // width: 200px;
                      // height: 34px;
                      background: #ffffff;
                      // border: 1px solid #dddddd;
                      border-radius: 2px;
                    }
                  }
                }
                .btn {
                  width: 80px;
                  height: 34px;
                  line-height: 34px;
                  background: #007af5;
                  border-radius: 2px;
                  font-size: 12px;
                  font-weight: 400;
                  color: #ffffff;
                  border: 0;
                  cursor: pointer;
                  &.reset {
                    margin: 0 10px;
                  }
                  &.deatil {
                    min-width: 80px;
                  }
                }
                #goBack {
                  max-width: 131px;
                  height: 34px;
                  background: #007af5;
                  border-radius: 2px;
                  border: 0;
                  font-size: 12px;
                  font-weight: 400;
                  color: #ffffff;
                  cursor: pointer;
                  box-sizing: border-box;
                }
                .el-dropdown {
                  margin: 0px 10px;
                  cursor: pointer;
                }
                .el-dropdown-link {
                  // display: inline-block;
                  width: 80px;
                  height: 34px;
                  line-height: 34px;
                  text-align: center;
                  color: #fff;
                  background: #007af5;
                  border-radius: 2px;
                }
              }

              :deep(.el-form-item__label) {
                // color: #6fd7f7;
                font-size: 14px;
                font-weight: 400;
                color: #46545d;
                height: 34px;
                line-height: 34px;
              }
              &.first {
                margin-bottom: 10px;
              }
            }
            .button {
              display: flex;
              justify-content: space-around;
              max-width: 40%;
              .btn {
                width: 80px;
                height: 34px;
                line-height: 34px;
                background: #007af5;
                border-radius: 2px;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                border: 0;
                padding: 0;
                cursor: pointer;
                &.reset {
                  margin: 0 10px;
                }
              }
              #goBack {
                max-width: 131px;
                height: 34px;
                background: #007af5;
                border-radius: 2px;
                border: 0;
                font-size: 12px;
                font-weight: 400;
                color: #ffffff;
                cursor: pointer;
              }
              .el-dropdown {
                margin: 0px 10px;
                cursor: pointer;
              }
              .el-dropdown-link {
                // display: inline-block;
                width: 80px;
                height: 34px;
                line-height: 34px;
                text-align: center;
                color: #fff;
                background: #007af5;
                border-radius: 2px;
              }
            }
          }

          .tableBox {
            height: calc(100% - 100px);
            background: #fff;
            // padding: 20px;
            box-sizing: border-box;
            //overflow: hidden;
            .desc {
              font-size: 12px;
              font-weight: 400;
              color: #ec4b5a;
              background: #fbdbde;
              line-height: 33px;
              height: 33px;
              text-align: center;
              border-radius: 2px;
              display: flex;
              align-items: center;
              justify-content: center;

              img {
                width: 16px;
                height: 16px;
                // margin: auto;
                margin-right: 10px;
              }
            }
            .table {
              // background: rgba(0, 0, 0, 0.1);
              height: calc(100% - 93px);
              width: 100%;
              margin-bottom: 15px;
              :deep(.el-table-column--selection.is-leaf .el-checkbox) {
                display: none;
              }
              :deep(.el-table__cell.is-leaf) {
                //background: rgba(0, 0, 0, 0.1);
                // color: #6fd7f7;
                //color: #fff;
                color: #929ea8;
              }

              :deep(tr:hover > td) {
                background-color: transparent;
              }
              :deep(.el-table__empty-text) {
                //color: #fff;
                color: #929ea8;
              }
              :deep(td.el-table__cell) {
                //color: #fff;
                color: #929ea8;
              }
            }
            .el-pagination {
              height: 34px;
              padding: 0;
              box-sizing: border-box;
              //width: 50%;
              :deep(.el-pagination__total) {
                font-size: 14px;
                font-weight: 400;
                color: #bbbbbb;
                line-height: 34px;
              }

              :deep(.el-input__inner) {
                height: 34px;
                //width: 60px;
                background: #fff;
                //color: #66b1ff;
                color: #46545d;
              }
              :deep(button:disabled) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(.el-pager li) {
                //background: rgba(0, 0, 0, 0.1);
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
                &.active {
                  // color: #fff;
                  color: #46545d;
                }
              }
              :deep(.btn-prev) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(.btn-next) {
                background: #fff;
                height: 34px;
                line-height: 34px;
                border: 1px solid #dddddd;
                //color: #66b1ff;
                color: #46545d;
                box-sizing: border-box;
              }
              :deep(span:not([class*='suffix'])) {
                color: #bbbbbb;
              }
              .el-pagination__jump {
                height: 34px;
                line-height: 34px;
              }
            }
          }
        }
      }
    }
  }
</style>
